<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="chinaMap" ref="myEcharts"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="height:400px">
      <el-col :span="12">
        <span>确诊人员分析</span>
        <el-divider></el-divider>
        <div class="grid-content bg-purple">
          <div ref="chart" style="width:100%;height:400px"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <span>隔离人员分析</span>
        <el-divider></el-divider>
        <div class="grid-content bg-purple">
          <div ref="chart1" style="width:100%;height:400px"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="height:400px">
      <el-col :span="12">
        <span>疑似人员分析</span>
        <el-divider></el-divider>
        <div class="grid-content bg-purple">
          <div ref="chart3" style="width:100%;height:400px"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <span>康复人员分析</span>
        <el-divider></el-divider>
        <div class="grid-content bg-purple">
          <div ref="chart4" style="width:100%;height:400px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import $ from 'jquery'
import dataBasemap from './jsonData.json'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.getEchartData()
    this.getEchartData1()
    this.getEchartData3()
    this.getEchartData4()
    this.chinaMap()
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '全部年龄', '正常年龄', '异常年龄'],
              ['0-15岁', 0, 0, 0],
              ['15-25', 10, 5, 5],
              ['25-35', 50, 18, 32],
              ['35岁以上', 100, 68, 32]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    getEchartData1() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        // const option = {
        //   title: {
        //     // text: 'Stacked Line'
        //   },
        //   tooltip: {
        //     trigger: 'axis'
        //   },
        //   legend: {
        //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        //   },
        //   grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        //   },
        //   toolbox: {
        //     feature: {
        //       saveAsImage: {}
        //     }
        //   },
        //   xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        //   },
        //   yAxis: {
        //     type: 'value'
        //   },
        //   series: [
        //     {
        //       name: 'Email',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230]
        //     },
        //     {
        //       name: 'Union Ads',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330]
        //     },
        //     {
        //       name: 'Video Ads',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330]
        //     },
        //     {
        //       name: 'Direct',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330]
        //     },
        //     {
        //       name: 'Search Engine',
        //       type: 'line',
        //       stack: 'Total',
        //       data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330]
        //     }
        //   ]

        // }
        const option = {
          title: {
            // text: 'Referer of a Website',
            // subtext: 'Fake Data',
            // left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '全部年龄' },
                { value: 735, name: '正常年龄' },
                { value: 580, name: '异常年龄' },
                // { value: 484, name: 'Union Ads' },
                // { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    getEchartData3() {
      const chart3 = this.$refs.chart3
      if (chart3) {
        const myChart = this.$echarts.init(chart3)
        const option = {
          title: {
            // text: 'Stacked Line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['全部年龄', '正常年龄', '异常年龄']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0-15岁', '15-25岁', '25-35岁', '35岁以上']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '全部年龄',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '正常年龄',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '异常年龄',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    getEchartData4() {
      const chart4 = this.$refs.chart4
      if (chart4) {
        const myChart = this.$echarts.init(chart4)
        const option = {
          title: {
            // text: 'Funnel'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
          },
          toolbox: {
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: ['全部年龄', '正常年龄', '异常年龄']
          },
          series: [
            {
              name: 'Funnel',
              type: 'funnel',
              left: '10%',
              top: 60,
              bottom: 60,
              width: '80%',
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: [
                { value: 60, name: '全部年龄' },
                { value: 40, name: '正常年龄' },
                { value: 20, name: '异常年龄' },
              ]
            }
          ]
        };
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    chinaMap() {
      const myEcharts = this.$refs.myEcharts
      if (myEcharts) {
        const myChart = this.$echarts.init(myEcharts)
        myChart.resize({
          width: 1200,
          height: 400
        });
        const option = {
          title: {
            text: '中国新冠疫情实时数据地图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['中国新冠疫情实时数据地图']
          },
          visualMap: {
            type: 'piecewise',
            top: 'top',
            pieces: [
              { min: 10000, max: 1000000, label: '确诊大于等于10000人', color: '#372a28' },
              { min: 5000, max: 9999, label: '确诊5000-9999人', color: '#4e160f' },
              { min: 1000, max: 4999, label: '确诊1000-4999人', color: '#974236' },
              { min: 100, max: 999, label: '确诊100-999人', color: '#ee7263' },
              { min: 1, max: 99, label: '确诊1-99人', color: '#f5bba7' },
            ],
            color: ['#E0022B', '#E09107', '#A3E00B']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          roamController: {
            show: true,
            left: 'right',
            mapTypeControl: {
              'china': true
            }
          },
          series: [
            {
              name: '确诊数',
              type: 'map',
              mapType: 'china',
              roam: false,
              label: {
                show: true,
                color: 'rgb(249, 249, 249)'
              },
              data: [//实时数据放在这里，格式如下...
                // {
                //   name: '北京',
                //   value: 212
                // }, {
                //   name: '天津',
                //   value: 60
                // }, 
              ]
            }
          ]
        };
        let dataBefore = dataBasemap.areaTree[0];
        let dataAfter = dataBefore.children.map(province => ({//接受到的数据进行数据格式转换...
          name: province.name,
          value: province.total.confirm,
        }))
        option.series[0].data = dataAfter;
        myChart.setOption(option); //使用指定的配置项和数据显示图表
      }
    }
  },
  watch: {},
  created() {
  }

}
</script>
<style scoped>
.chinaMap{
  margin:20px 0;width:100%;height:400px
}
</style>